const fs = require('fs');
const path = require('path');

// 拼接各个文件的绝对路径
let oldHtml = path.join(__dirname, 'index.html');
let newHtml = path.join(__dirname, 'abc', 'index.html');
let cssPath = path.join(__dirname, 'abc', 'index.css');
let jsPath = path.join(__dirname, 'abc', 'index.js');

// 1、读取 index.html ，得到字符串
fs.readFile(oldHtml, 'utf-8', (err, data) => {
    if (err) return console.log(err);
    // 读取没有错误，说明读取成功了
    // 2、使用正则表达式，获取到css代码，使用 单独的index.css 保存
    let cssReg = /<style>([\s\S]*)<\/style>/g;
    let cssResult = cssReg.exec(data); // ['带style标签的全部样式代码', '不带style标签的css代码', ...]
    // console.log(cssResult[1]); // 取得css代码
    fs.writeFile(cssPath, cssResult[1], err => {
        if (err) return console.log(err);
        console.log('css分离成功');
    });

    // 3、使用正则表达式，获取到js代码，使用 单独的index.js 保存
    let jsReg = /<script>([\s\S]*)<\/script>/g;
    let jsResult = jsReg.exec(data); // ['带script标签的全部样式代码', '不带script标签的js代码', ...]
    // console.log(jsResult[1]); // 取得js代码
    fs.writeFile(jsPath, jsResult[1], err => {
        if (err) return console.log(err);
        console.log('js分离成功');
    });
    // 4、替换style标签为link标签、替换script标签为 <script src="">
    data = data.replace(cssReg, '<link rel="stylesheet" href="index.css" />');
    data = data.replace(jsReg, '<script src="index.js"></script>');
    // 
    fs.writeFile(newHtml, data, err => {
        if (err) return console.log(err);
        console.log('html保存成功');
    });
});
